<!--
 * @Description: 驳回通用弹窗
 * @Author: Li Yujie
 * @Date: 2020/12/15
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2020/12/15
-->
<template>
    <div class="wrapper">
        <el-dialog
            :title="title"
            :visible.sync="rejectDialog"
            width="640px"
            :close-on-click-modal="false"
            @close="reason = ''"
            class="reject-dialog"
        >
            <div
                class="reject-reason"
                v-if="reasonDetail"
            >
                <div class="reason-wrapper">{{ reasonDetail }}</div>
                <el-button
                    type="primary"
                    class="know-btn"
                    size="middle"
                    @click="$emit('update:visible', false)"
                >
                    知道了
                </el-button>
            </div>
            <div v-else>
                <el-input
                    v-model="reason"
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 6}"
                    :placeholder="placeholder"
                    :maxlength="maxlength"
                    show-word-limit
                />
                <div
                    class="dialog-footer"
                >
                    <el-button
                        size="medium"
                        type="default"
                        :style="{width: '120px', marginRight: '32px'}"
                        @click="$emit('update:visible', false)"
                    >
                        取 消
                    </el-button>
                    <el-button
                        type="primary"
                        size="medium"
                        :style="{width: '120px'}"
                        :disabled="!reason"
                        @click="handleConfirm"
                    >
                        确 定
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'RejectDialog',
    props: {
        title: {
            type: String,
            default: '审核驳回'
        },
        visible: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: '请输入驳回原因'
        },
        maxlength: {
            type: Number,
            default: 20
        },
        reasonDetail: {
            type: String,
            default: ''
        }
    },
    computed: {
        rejectDialog: {
            get() {
                return this.visible;
            },
            set(val) {
                this.$emit('update:visible', val);
            }
        }
    },
    data() {
        return {
            reason: ''
        };
    },
    mounted() {
    },
    methods: {
        handleConfirm() {
            this.$emit('confirm', this.reason);
            this.$emit('update:visible', false);
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0px 1px 0px 0px rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }

    .reject-dialog {
        /deep/ .el-dialog__footer {
            text-align: center;
            padding: 0;
            padding-bottom: 30px;
            margin-top: 6px;
        }

        /deep/ .el-dialog__body {
            padding: 24px 64px;
        }
    }

    .dialog-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 24px;
    }

    .reject-reason {
        display: flex;
        flex-direction: column;
        align-items: center;

        .reason-wrapper {
            width: 100%;
            padding: 24px;
            background: #FBFBFB;
            border-radius: 4px;
            border: 1px solid #EEEEEE;
            line-height: 20px;
            margin: 4px 34px;
        }

        .know-btn {
            width: 120px;
            margin-top: 30px;
        }
    }
}
</style>
